<div *ngIf="volume" [formGroup]="volume" class="volume-wrapper">
 
  <!-- Volume Type Input -->
    <mat-form-field appearance="outline" id="type">
      <mat-label>Type</mat-label>
      <mat-select  (selectionChange)="selectType($event)" formControlName="type">
        <mat-option *ngFor="let i of types"
        [disabled]="newTypeIsDisabled()"
        [matTooltip]="newTypeTooltip()"
        value="{{i}}">{{i}}</mat-option>
      </mat-select>
    </mat-form-field>
  
    <!-- Volume Name Input -->
    <mat-form-field *ngIf="typeSelected === 'New'" class="wide" appearance="outline" id="name">
      <mat-label>Name</mat-label>
      <input matInput formControlName="name"/>
    </mat-form-field>
    
    <mat-form-field *ngIf="typeSelected === 'Existing'" class="wide" appearance="outline" id="name">
      <mat-label>Name</mat-label>
      <mat-select formControlName="name">
        <mat-option *ngFor="let i of existingPVCs"
          value="{{i}}">{{i}}</mat-option>
      </mat-select>
    </mat-form-field>

    <!-- Size Input -->
    <mat-form-field *ngIf="typeSelected === 'New'" class="wide" appearance="outline" id="size">
      <mat-label>Size</mat-label>
      <input matInput formControlName="size" />
    </mat-form-field>
  
    <!-- Mode Input -->
    <mat-form-field *ngIf="typeSelected === 'New'" class="wide" appearance="outline" id="mode">
      <mat-label>Mode</mat-label>
      <mat-select formControlName="mode">
        <mat-option value="ReadWriteOnce">ReadWriteOnce</mat-option>
        <mat-option value="ReadOnlyMany">ReadOnlyMany</mat-option>
        <mat-option value="ReadWriteMany">ReadWriteMany</mat-option>
      </mat-select>
    </mat-form-field>
  
    <!-- Mount Input -->
    <mat-form-field class="wide" appearance="outline" id="path">
      <mat-label>Mount Point</mat-label>
      <input matInput formControlName="path" />
    </mat-form-field>
  </div>